{% extends 'basic/layout/page_basic_bread_query.html' %}
{% load static %}

<!-- 标题部分 -->
{% block title %}
    院系管理
{% endblock %}

<!-- CSS部分-->
{% block excss %}
    <style>
        .dataArea i:hover{
            color:red;
            font-weight: bold;
        }
    </style>
{% endblock %}

<!-- 修改二级面包屑导航 -->
{% block breadsecond %} 基础数据 {% endblock %}
<!-- 修改三级面包屑导航 -->
{% block breadthird %} 院系管理 {% endblock %}


{% block excontent %}
    <div class="dataArea"></div>
{% endblock %}


<!-- JS部分-->
{% block js %}
    <script>
        // == 入口函数: 页面加载完成后自动执行！ ===
        $(function () {
            // 初始化院系的展示
            loadData();
            // 响应所有的按钮
            buttonClick();
        });

        // ==========加载所有院系的数据===========
        function loadData() {
            // 发起Ajax请求
            $.ajax({
                url: "{% url 'list_faculty' %}", // 从哪个url请求数据
                method: 'post',
                data: {
                    inputStr: $('#inputStr').val().trim(),
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    // 使用页面渲染数据
                    showInPage(res.data);

                }
            })
        }

        // ============ 把数据渲染成在页面展示 ================
        function showInPage(data) {
            // 先获取要填充的容器
            let targetContrainer = $('.dataArea');
            // 清除当前的结果
            targetContrainer.empty();

            // 遍历数据   data中的每一个院系有三个属性：id, name, number
            $.each(data, (name, value) => {
                // 新建一个外层的div
                let outer = $('<div>').attr('class','layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2')
                    .css('margin-bottom','20px');
                // 新建一个内部的div
                let child = $('<div>').attr('style','width: 80%; height: 200px;background-color:lightblue; ' +
                    'border-radius: 10px; margin: auto;font-size:18px; text-align:center;').appendTo(outer);

                // 新建一个容器放置院系的名称
                $('<div>').text(value.name).attr('name',value.id).attr('style','font-weight: bold;color:darkred;line-height:80px;').appendTo(child);
                // 附加专业的数
                $('<div>').html("专业数：" + value.number).attr('style','line-height:80px').appendTo(child);
                // 附加修改的图
                 $('<i>').attr('id', 'btnEdit').attr('name', value.name).attr('code', value.id).attr('class', 'fa fa-edit').attr('aria-hidden', true).appendTo(child);
                $('<span>').html("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp").appendTo(child);
                $('<i>').attr('id', 'btnDel').attr('name', value.name).attr('code', value.id).attr('class', 'fa fa-trash').attr('aria-hidden', true).appendTo(child);

                // 把外层的div附加到容器中
                outer.appendTo(targetContrainer);

            })
        }

        // =========== 响应所有的按钮 ====================
        function buttonClick() {
            // 点击查询按钮
            $('#btnQuery').on('click',function () {
                loadData();
            });
            // 点击显示全部的按钮
            $('#btnAll').on('click',function () {
                location.reload();
            });
            // 点击添加按钮
            $('#btnAdd').on('click',function () {
                // 使用layui中的弹出输入框
                layui.use('layer',function () {
                    let layer = layui.layer;
                    layer.prompt({
                        title: '请输入院系的名称，请点击确定',
                        area:['300px', '100px'],
                        formType: 0  // 0--单行文本  1--密码   2--多行文本
                    }, function (value, index,  elem) {
                        // 点击确定按钮的回调函数 --- 提交到后台
                        $.ajax({
                            url: "{% url 'add_faculty' %}",
                            method: 'post',
                            data: {
                                name: value,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            success:function (res) {
                                if(res.status){
                                    location.reload();
                                } else {
                                    layer.msg(res.error, {
                                        icon: 2,
                                        area: ['450px','200px'],
                                        time: -1,
                                        btn: ['关闭'],
                                    })
                                }
                            }
                        })
                        
                    })


                })
            });

            // 点击修改的图标
            $('body').on('click', '#btnEdit',function () {
                // 获取当前操作的id和名称
                let id = $(this).attr('code');
                let name = $(this).attr('name');
                // 使用弹出的输入框完成修改
                layui.use('layer',function () {
                    let layer = layui.layer;
                    layer.prompt({
                        title: "修改院系的名称，点击确定",
                        area: ['300px', '100px'],
                        value: name,
                        formType: 0
                    }, function (value, index, elem) {
                        // 点击确定按钮的回调函数-- Ajax
                        $.ajax({
                            url: "{% url 'edit_faculty' %}",
                            method: 'post',
                            data:{
                                id: id,
                                name: value,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            success: function (res) {
                                if (res.status){
                                    location.reload();
                                } else {
                                    layer.msg(res.error, {
                                        icon: 2,
                                        area: ['450px','200px'],
                                        time: -1,
                                        btn: ['关闭']
                                    })
                                }
                            }
                        })

                    })
                })
            });

            // 点击删除图标
            $('body').on('click', '#btnDel',function () {
                // 获取当前的id和名称
                let id = $(this).attr('code');
                let name = $(this).attr('name');
                let confirmStr = "您确认要删除院系信息【" + id + "--" + name + "】吗？";
                // 提示框确认
                layui.use('layer',function () {
                    let layer = layui.layer;
                    layer.confirm(confirmStr, {
                        icon:3,
                        title: "删除确认",
                        area:['480px','180px'],
                        btn: ['确认','关闭']
                    }, function (index) {
                        // 点击确认的回调函数
                        $.ajax({
                            url: "{% url 'del_faculty' %}",
                            method: 'post',
                            data:{
                                id: id,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            dataType: 'json',
                            success: function (res) {
                                if(res.status){
                                    location.reload();
                                } else {
                                    layer.msg(res.error, {
                                        icon: 2,
                                        area:['400px','200px'],
                                        time:-1,
                                        btn:['关闭']
                                    })
                                }
                            }
                        })
                    })
                })

            })
        }
    </script>
{% endblock %}


